import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom'; // 使用前端路由中的withRouter组件，在这个子组件内就有调用路由的能力了，就能在this.props中获取到路由相关的内容
import axios from 'axios';
import { Modal, Button, Input, message } from 'antd';
import './style.css';

class Login extends Component {

	constructor(props) {
		super(props);
		this.state = {
			login: false, // 判断登录状态，默认未登录
			modal: false, // 控制登录框是否显示
			user: '', // 用来存储input输入框中的内容，password同，来和后台的数据做对比判断能否登录成功
			password: ''
		}
		this.showModal = this.showModal.bind(this); // 在render函数中执行构造函数中的方法，都要先改变方法的作用域
		this.hideModal = this.hideModal.bind(this);
		this.changeUser = this.changeUser.bind(this);
		this.changePassword = this.changePassword.bind(this);
		this.checkLogin = this.checkLogin.bind(this);
		this.logout = this.logout.bind(this);
	}

	showModal() { // 用来显示登录框
		this.setState({
			modal: true
		})
	}

	hideModal() { // 隐藏登录框
		this.setState({
			modal: false
		})
	}

	changeUser(e) { // 改变参数user存储的input输入框中的内容
		this.setState({
			user: e.target.value
		})
	}

	changePassword(e) { // 改变参数password的值
		this.setState({
			password: e.target.value
		})
	}

	checkLogin() { // 点击登录框的确认按钮进行登录功能
		const { user, password } = this.state;
		const url = `http://www.dell-lee.com/react/api/login.json?user=${user}&password=${password}`; // 这个ajax请求是用来判断登录信息与后台是否一致
		axios.get(url, {
			withCredentials: true // 在接口添加withCredentials参数设为true，即可保存登陆状态
		}).then(res => {
			const login = res.data.data.login; // 获取登录信息
			if (login) {
				message.success('登陆成功');
				this.setState({
					login: true,
					modal: false
				})
			}else {
				message.error('登陆失败');
			}
		})
	}

	logout() { // 退出功能
		axios.get('http://www.dell-lee.com/react/api/logout.json', {
			withCredentials: true
		})
			.then(res => {
				const data = res.data.data;
				if(data.logout) {
					this.setState({
						login: false
					});
				}
				this.props.history.push('/'); // 用前端路由实现退出登录就返回首页的功能
			})
	}

	render() {
		const { login } = this.state;
		return (
			<div className='login'>
				{
					login ?
						<Button
							type="primary"
							onClick={this.logout}
						>退出</Button> :
						<Button 
							type="primary"
							onClick={this.showModal}
						> 
							登陆
						</Button>
				}
				<Link to='/vip'>
					<Button 
						type="primary" 
						style={{ marginLeft: 10 }}
					>
						Vip
					</Button>
				</Link>
				<Modal
		          title="登陆"
		          visible={this.state.modal}
		          onOk={this.checkLogin}
		          onCancel={this.hideModal}
		        >
					<Input 
						placeholder='请输入用户名' 
						style={{ marginBottom: 10 }}
						value={this.state.user}
						onChange={this.changeUser}
					/>
					<Input
						placeholder='请输入密码'
						type='password'
						value={this.state.password}
						onChange={this.changePassword}
					/>
				</Modal>
			</div>
		)
	}

	componentDidMount() {
		axios.get('http://www.dell-lee.com/react/api/isLogin.json', { // 这个ajax请求是用来获取初始的登录信息，来判断按钮样式
			withCredentials: true // 保存登陆状态
		})
			.then(res => {
				const login = res.data.data.login;
				this.setState({ login })
			})
	}

}

export default withRouter(Login);